<template>
    <div class="type-list">
        <div class="action-btn">
            <Button size="small" @click="showCreate(0)" type="success">添加分类</Button>
        </div>
        <Table border height="650" ref="tableList" row-key="type_id" :columns="list" :data="tablelist" :loading="dataloading">
            <template #sort="{ row }">
                <InputNumber v-model="row.sort" size="small" :min="0" @on-change="sortDetail(row.type_id, $event)" />
            </template>
            <template #action="{ row }">
                <Button type="success" size="small" style="margin-right: 5px;float:left"
                    @click="showCreate(row.type_id)">添加</Button>
                <Button type="info" size="small" style="margin-right: 5px;float:left"
                    @click="showEdit(row.type_id)">修改</Button>
                <Button type="error" size="small" @click="remove(row.type_id)">删除</Button>
            </template>
        </Table>
        <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="分类管理" width="640"
            v-model="showModalStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" :model="type" ref="typeValidate" :rules="typeValidate" action="javascript:void(0)">
                <FormItem label="分类名称" prop="name">
                    <Input v-model="type.name" placeholder="输入分类名称..."></Input>
                </FormItem>
                <FormItem label="排序">
                    <InputNumber :max="9999" :min="0" v-model="type.sort"></InputNumber>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                    <Button type="primary" @click="typeCreateEdit('typeValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
    </div>
</template>

<script>
export default {
    name: 'TypeList',
    data() {
        return {
            loading: true,
            dataloading: true,
            list: [
                {
                    title: 'ID',
                    key: 'type_id',
                    width: 60,
                },
                {
                    title: '名称',
                    minWidth: 300,
                    key: 'name',
                    tree: true,
                },
                {
                    title: '排序',
                    slot: 'sort',
                    width: 150,
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 180,
                    align: 'left',
                }
            ],
            tablelist: [],
            type: {
                detail_id: 0,
                parent_id: 0,
                name: '',
                sort: 0
            },
            showModalStatus: false,
            typeValidate: {
                name: [
                    { required: true, message: '名称必须填写', trigger: 'blur' }
                ]
            }
        }
    },
    // 计算
    computed: {},
    // 监听
    watch: {},
    created() {
        // 取数据
        this.getTableList();
    },
    methods: {
        getTableList() {
            this.$api.types.list().then(res => {
                this.tablelist = res.result;
            }).finally(e=>{
                this.dataloading = false;
            });
        },
        // 展开添加
        showCreate(parentid) {
            this.showModalStatus = !this.showModalStatus;
            this.type.detail_id = 0;
            this.type.parent_id = parentid;
            this.type.name = '';
            this.type.sort = 0;
            this.loading = false;
        },
        // 添加||修改
        typeCreateEdit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // 判断是添加还是修改
                    if (this.type.detail_id === 0) {
                        this.$api.types.create({ parent_id: this.type.parent_id, name: this.type.name, sort: this.type.sort }).then(res => {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }).finally(e => {
                            this.loading = false;
                        });
                    } else {
                        this.$api.types.edit({ detail_id: this.type.detail_id, name: this.type.name, sort: this.type.sort }).then(res => {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }).finally(res => {
                            this.loading = false;
                        });
                    }
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 展开修改
        showEdit(id) {
            this.$api.types.detail({ detail_id: id }).then(res => {
                this.showModalStatus = !this.showModalStatus;
                this.type = res.result;
                this.type.detail_id = res.result.id;
            }).finally(e=>{
                this.loading = false;
            });
        },
        // 删除
        remove(id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    this.$api.types.remove({ detail_id: id }).then(res => {
                        this.getTableList();
                    });
                }
            });
        },
        sortDetail(id, sort) {
            this.$api.types.sort({ detail_id: id, sort: sort }).then(res => {
                this.getTableList();
            });
        }
    }
}
</script>
